<template>
    <div class="cart_warp">
        <div class="m-secondary-navigator">
            <span @click="tosy">首页</span>
            /
            <span class="carts">购物车</span>
        </div>
        <div class="no_goods" v-if="kong">
            <div class="no_goodsinner">
                <img src="../../../../assets/images/kongcart.png">
            </div>
            <p class="e-info">
                购物车还是空的
               
            </p>
            <div class="btnjx"><button @click="tosy">继续逛</button></div>
        </div>
        <div class="has_goods" v_if="!kong">
            <div class="title">
                    <span class="xuanze">
                         <input type="checkbox"  name="all"  class="Checkbox"  v-model="allChecked" >
                        <label  @click="chooseAllGoods()"  :class="{check:allChecked}"></label>
                        </span>
                        <span class="all-txt">全选</span>
                        <span class="aproduct">商品信息</span>
                        <span class="aprice">单价</span>
                        <span class="anum">数量</span>
                        <span class="atotal">金额</span>
                        <span class="edit">操作</span>
            </div>
            <div class="merchant-info">
                    <div v-for="(item,index1) in goodsobj" class="store-item clearfix" :key="index1">
  <p class="company">
    <span class="xuanze">
      <input type="checkbox" name="all"  v-model="item.checked" class="Checkbox" />
      <label  @click="chooseShopGoods($event,index1)"  :class="{check:item.checked}"></label>
    </span>
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
   <li class="select">
        <span class="xuanze">
    <input type="checkbox" v-model="data.checked" class="Checkbox"/>
      <label  @click="choose(index1, index)"  :class="{check:data.checked}"></label>
      <!-- <input type="checkbox" class="Checkbox"/>
      <input type="text" v-model="data.checked"  @click="choose(index1,index)" class="bg" :class="{check:data.checked}" /> -->
      </span>
      </li>
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <i class="left" @click="jian($event,data.p_id,data.c_style,index1,index,data.c_price,data.c_total)">-</i>
        <input v-model="data.c_num" @change="handlechange"/>
        <i class="right" @click="add($event,data.p_id,data.c_style,index1,index,data.c_price,data.c_total)">+</i>
        <!-- <el-input-number v-model="data.c_num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->
      </li>
      <li class="dantotal">
        <span>￥</span>
        <input v-model="data.c_total" disabled="disabled"/>
      </li>
      <li class="detele">
        <i class="fa fa-window-close" @click="deletes(data.c_id)"></i>
      </li>
 
   </ul>
    <!-- 商品名称:<span v-html="data.name"></span>
    价格:<span v-html="data.price"></span> -->
  </div>

  <div class="cal-store-box">
    <!-- <p>店铺总运费: <span v-html="calEveryFare(index1)"></span></p> -->
    <p>店铺商品总金额: <span>￥{{calEveryStore(index1)}}</span></p>
  </div>
</div>
<div class="zong clearfix">
   <span class="xuanze">
                         <input type="checkbox"  name="all"  class="Checkbox"  v-model="allChecked" >
                        <label  @click="chooseAllGoods()"  :class="{check:allChecked}"></label>
                        </span>
  <span>全选</span>
  <div class="end noselect" v-if="tobuy">去结算</div>
  <div class="end yselect" v-if="!tobuy" @click="settle($event)">去结算</div>
  <div class="cal-box">
    <!-- <p>商品总运费:<span v-html="totalFare.toFixed(2)"></span></p> -->
    <p>商品总金额:<span>￥{{totalMoney}}</span></p>
  </div>
  
</div>

            </div>

        </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
  inject:['reload'],
data () {
    return {
        num1:1,
allChecked : false,
 totalMoney : 0,
 tobuy:true,
 dingdan:[],
    // totalFare : 0,
    }
},
created () {
 if(!sessionStorage.getItem("userid"))
  {
    this.kong=true
  }
  else{
    this.cartdeta(this)
   
  }
 
},
mounted () { 
  //  console.log("kong",this.kong)
},
computed: {
   ...mapState(["kong","goodsobj"]),
},
methods: {
    ...mapActions(["cartdeta","cartnum","carts"]),
   handleChange(value) {
        // console.log(value);
      },
      handlechange(value)
      {
        var reg=/^[0-9]+.?[0-9]*$/
        if(reg.test(value.target.value))
        {
              if(value.target.value<0)
        {
          value.target.value=1
        }
        else if(value.target.value>10){
          value.target.value=10
        }
        }
        else{
          value.target.value=1
        }
        
   

      },
    tosy()
    {
        this.$router.push("/");
    },
    calTotalMoney : function () {
      var oThis = this;
      this.totalMoney = 0;
      // console.log("cal",this.goodsobj.length)
      for ( let i = 0, len = this.goodsobj.length; i < len; i++ ) {
        var list = this.goodsobj[i]['list'];
        list.forEach(function(item, index, arr) {
          // console.log(item.c_price,item.c_num);
          if ( list[index]['checked'] ) {
            oThis.totalMoney += parseFloat(item.c_price) * parseFloat(item.c_num);
          }
        });
      }
      if(oThis.totalMoney>0)
      {
        oThis.tobuy=false;
      }
      else{
        oThis.tobuy=true;
      }
    },
    calEveryStore : function(index) {
      var everyStoreMoney = 0;
       var list = this.goodsobj[index]['list'];
      list.forEach(function(item, index, arr) {
        if ( list[index]['checked'] ) { 
          everyStoreMoney += parseFloat(item.c_price) * parseFloat(item.c_num);
        }
      });
      return everyStoreMoney;
    },
     cal : function(index) {
      //  console.log("cal",index)
      this.calEveryStore(index);
      this.calTotalMoney();
    },
    deletes(id)
    {
      let c_id=[];
      c_id.push(id);
      // console.log(index1,index);
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      this.$axios.post("http://127.0.0.1:8081/client/delete",{
       c_id:c_id
      }).then(res=>
      {
        if(res.data.status==1)
        {
          
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.reload();
          // this.$router.go(0)
              

        }
        else{
          this.$message({
          message: '删除失败',
          type: 'warning'
        });
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          }); 
               
        });
    } ,  
    add(e,pid,style,index1,index,price,total)
    {

      // console.log(e.currentTarget.previousElementSibling.value)
      if(e.path[1].children[1].value<10)
      {
        e.path[1].children[1].value=parseInt(e.path[1].children[1].value)+1;
         e.path[2].children[5].children[1].value=e.path[1].children[1].value*this.goodsobj[index1].list[index].c_price
              this.goodsobj[index1].list[index].c_num=(this.goodsobj[index1].list[index].c_num)+1;
              this.goodsobj[index1].list[index].c_total=parseInt(this.goodsobj[index1].list[index].c_total)+(this.goodsobj[index1].list[index].c_price);
              this.carts(parseInt(1));
              this.$axios.post("http://127.0.0.1:8081/client/addcart",{
                pid:pid,
                uid:sessionStorage.getItem("userid"),
                style:style,
                num:1,
                price:price}).then(res=>{
              // console.log(res)
              })
      }
      else{
        this.goodsobj[index1].list[index].c_num=10
              }
               this.cal(index);
              
    },
    jian(e,pid,style,index1,index,price,total)
    {
      // console.log(e.currentTarget.nextElementSibling.value)
        if(e.path[1].children[1].value>=1)
        {

              e.path[1].children[1].value=parseInt(e.path[1].children[1].value)-1;
              e.path[2].children[5].children[1].value=e.path[1].children[1].value*this.goodsobj[index1].list[index].c_price
              this.goodsobj[index1].list[index].c_num=(this.goodsobj[index1].list[index].c_num)-1;
              this.goodsobj[index1].list[index].c_total=parseInt(this.goodsobj[index1].list[index].c_total)-(this.goodsobj[index1].list[index].c_price);
          this.carts(parseInt(-1));
          this.$axios.post("http://127.0.0.1:8081/client/addcart",{
                pid:pid,
                uid:sessionStorage.getItem("userid"),
                uname:sessionStorage.getItem("username"),
                style:style,
                num:-1,
                price:price}).then(res=>{
              // console.log(res)
              })
              if(e.path[1].children[1].value==0)
              {
                this.deletes(pid,sessionStorage.getItem("userid"),style,index1,index)
                  this.reload();
              }
        }
        else{
          // this.$refs.input1[index].value=1
        }
         this.cal(index);
 
    },
     
    settle()
    {
        // this.$router.push({path:"/settlement",query:{
        //   uid:sessionStorage.getItem("userid")
        // }});
        // console.log(this.goodsobj);
        let c_id=[];
        for(let i=0;i<this.goodsobj.length;i++)
        {
          // console.log(this.goodsobj[i].checked);
          // if(this.goodsobj[i].checked)
          // {
          //   this.dingdan.push(this.goodsobj[i]);
          //   // console.log(this.dingdan)
          // }
          // else{
            let list1=[];
            for(let j=0;j<this.goodsobj[i].list.length;j++)
            {
              console.log()
              if(this.goodsobj[i].list[j].checked)
              {
                list1.push(this.goodsobj[i].list[j]);
                c_id.push(this.goodsobj[i].list[j].c_id);
                
              }
            }
            if(list1.length>=1)
            {
              this.goodsobj[i].list=list1;
              this.goodsobj[i].status=0;
              this.goodsobj[i].random=Math.floor(Math.random()*1000)
              this.dingdan.push(this.goodsobj[i]);

            }
            
          // }
        }
        
        // console.log(this.dingdan);
        // console.log(c_id)
        localStorage.dingdan=JSON.stringify(this.dingdan);
        localStorage.total=this.totalMoney;
        localStorage.c_id=c_id;
         this.$router.push({path:"/settlement",query:{
          uid:sessionStorage.getItem("userid")
        }});
        
    },
    // 全部商品全选
    chooseAllGoods : function() {
      var flag = true;
  // console.log(this.goodsobj)
      if ( this.allChecked ) {
        flag = false;
      }
      for ( var i = 0, len = this.goodsobj.length; i < len; i++ ) {
        this.goodsobj[i]['checked'] = flag;
        var list = this.goodsobj[i]['list'];
        for ( var k = 0, len1 = list.length; k < len1; k++ ) {
          list[k]['checked'] = flag;
        }
      }
      this.allChecked = !this.allChecked;
        this.calTotalMoney();
    },
 
    // 每个店铺全选
    chooseShopGoods : function(e,index) {
      // console.log("e",e.currentTarget.previousElementSibling)
      var list = this.goodsobj[index]['list'],
        len = list.length;
        // console.log("list", this.goodsobj[index]['checked']);
      if ( this.goodsobj[index]['checked'] ) {
        for (var i = 0; i < len; i++ ) {
          list[i]['checked'] = false;
        }
      } else {
        for (var i = 0; i < len; i++ ) {
          list[i]['checked'] = true;
        }
      }
      this.goodsobj[index]['checked'] = !this.goodsobj[index]['checked'];
      // 判断是否选择所有商品的全选
      this.isChooseAll();
       this.cal(index);
    },
 
    // 单个选择
    choose : function( index1, index) {
      // console.log(this.$refs.input3[index].value)
      var list = this.goodsobj[index1]['list'];
      // console.log("list",list)
        var len = list.length;
        // console.log(len)
      if ( list[index]['checked'] ) {
        // console.log(list[index]['checked'])
        this.goodsobj[index1]['checked'] = false;
        this.allChecked = false;
        this.$set(list[index], 'checked', !list[index]['checked'])
        // list[index]['checked'] = !list[index]['checked'];
      } else {
         this.$set(list[index], 'checked', !list[index]['checked'])
        // console.log(list[index]['checked'])
        // list[index]['checked']=!list[index]['checked'];
        // 判断是否选择当前店铺的全选
        var flag = true;
        for (var i = 0; i < len; i++ ) {
          if ( list[i]['checked'] == false ) {
            flag = false;
            break;
          }
        }
        flag == true ? this.goodsobj[index1]['checked'] = true : this.goodsobj[index1]['checked'] = false;
      }

      // 判断是否选择所有商品的全选
      this.isChooseAll();
       this.cal(index1);
    },
 
    // 判断是否选择所有商品的全选
    isChooseAll : function() {
      var flag1 = true;
      for ( var i = 0, len = this.goodsobj.length; i < len; i++ ) {
        if ( this.goodsobj[i]['checked'] == false ) {
          flag1 = false;
          break;
        }
      }
      flag1 == true ? this.allChecked = true : this.allChecked = false;
    },
},
watch:{
  goodsobj:function(newValue, oldValue) {
      // console.log(newValue,oldValue);
    }
}
}
</script>

<style scoped>
.cart_warp{
    width: 1080px;
    margin: 0 auto
}
.m-secondary-navigator{
    padding: 20px 0;
    width: 100%;
    display: block;
    float: none;
    background: transparent repeat 0 0 none;
    font-size: 14px;
}
.clearfix::after{
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;
  display: block;
}
.carts{
    color: #666;
}
.no_goods{
    padding-top: 100px;
    padding-bottom: 200px;
}
.no_goodsinner{
    width: 153px;
    margin: 0 auto;
}
.no_goodsinner img{
    width: 100%;
    display: block;
}
.e-info{
    height: 60px;
    font-size: 14px;
    line-height: 60px;
    width: 100%;
    text-align: center;
    color:#333;
}
.btnjx{
    width: 100%;
    text-align: center;
}
.btnjx button{
        color: #666;
    border: 1px solid #666;
    min-width: 97px;
    height: 43px;
    line-height: 41px;
    font-size: 18px;
    background: #fff;
}
.btnjx button:hover{
    color: #fff;
    background-color: #845f3f;
    border-color: #845f3f;
}
.has_goods{
  margin-top:20px;
}
.has_goods .title{
        height: 42px;
    line-height: 40px;
    background-color: #fafafa;
    color: #999;
    margin-bottom: 3px;
    /* padding-left: 30px; */
}
/* input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
} */
.xuanze {
    position: relative;
        box-sizing: content-box;
    display: inline-block;
    margin-left: 8px;
    margin-right: 30px;
    vertical-align: middle;
    margin-top: -20px;
}
.Checkbox {
    position: absolute;
    visibility: hidden;
}
.Checkbox+label {
    position:absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
    background-color:#fff;
} 
.xuanze .check{
     background: #845f3f !important;
}
.xuanze .bg{
  background: #fff;
  position: absolute;
  width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
}

/* .Checkbox:checked+label{
   
} */
.title span{
    display: inline-block;
    font-size: 14px;
    text-align: center;
}
.all-txt{
        width: 120px;
        /* box-sizing: border-box; */
        /* padding-left:10px;  */
}
.aproduct{
    width: 320px;
    box-sizing: border-box;
    padding-left: 20px;
}
.aprice{
    width: 200px;
}
.anum{
    width: 205px;
}
.atotal{
    width: 125px;
}
.edit{
        display: inline-block;
    vertical-align: middle;
}
.company_inner{
  margin-left: 20px;
}
.company{
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
  font-size: 14px;
  color: #666;
}
.el-input-number {
  width: 130px;
}
.goods-item ul{
  border-bottom: 1px solid #e7e7e7
}
.goods-item li{
  float: left;
  height: 72px;
  line-height: 72px;
  padding: 35px 0;
  text-align: center;
}
.goods-item .tupian{
  width: 120px;
  margin-left:10px;
  padding-top: 10px ;
}
/* .goods-item .tupian{
  height: 107px;
  padding: 0
} */
.tupian img{
  display: block;
  width: 100%;
}
.goods-item .yangshi{
  width: 320px;
  padding-left:20px;
  height: 142px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.goods-item .jiaprice{
  width: 210px;
}
.goods-item .jinum{
  width: 205px;
  position: relative;
  text-align: center
}
.goods-item .dantotal{
  width: 125px;
}
.goods-item .detele{
  width: 40px;
  font-size: 24px;
  color: #c00000;
}

.jinum i{
border:1px #eee solid;
 width: 41px;
 height: 41px;
 line-height: 40px;
 position: absolute;
 display: block;
 font-size: 20px;}
.jinum .left{
  top:51px;
 left:10px
}
.jinum .right{
  top:51px;
 right:10px
}
.jinum input{
width: 80px;
height: 40px;
border: 1px #666 solid;
line-height: 40px;
box-sizing: border-box;
text-align: center;
}
.dantotal input{
  width: 40px;
  border:none;
  background: none;
  font-size: 16px;
}
.cal-store-box{
  float: right;
  height: 40px;
  color:#999;
  line-height: 40px;
}
.cal-store-box span,.zong .cal-box span{
  color:#c00000;
  font-weight: bold
}
.zong .cal-box{
  color:#000
}
.zong .cal-box{
  float:right;
}
.zong{
 margin: 30px 0;
 /* padding-right: 20px; */
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  background: #fafafa;
  width: 1080px;
}
.zong .end{
  float: right;
  width: 200px;
  text-align: center;
  height:80px;
  line-height:80px;
  margin-left: 20px;
  letter-spacing: 10px;
  font-weight: bold; 
  color: #fff;
}
.zong .noselect{
  background: #f0f0f0;
   /* pointer-events: none; */
        cursor: not-allowed;

}
.zong .yselect{
      background-color: #a9010d;
      cursor:pointer
}
/* {
  paddi#c00000;ng: 35px 0;

} */
</style>
